<template>
  <div>
    <el-form :inline="true" :model="data.search">
      <el-form-item label="操作时间">
        <el-date-picker
          v-model="data.search.searchDate"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="queryData">查询</el-button>
      </el-form-item>
    </el-form>

    <yu-table
      ref="yuTable"
      :tableData="data.tableData"
      :columns="data.tableData.columns"
    >
      <template v-slot:loginType="{ scopeData }">
        <span v-if="scopeData.row.accountType == 1">{{ '账户登录' }}</span>
        <span v-else-if="scopeData.row.accountType == 2">{{ '邮箱登录' }}</span>
        <span v-else="scopeData.row.accountType == 3">{{ '手机号登录' }}</span>
      </template>
    </yu-table>
  </div>
</template>

<script setup>
import { reactive, ref, toRef, getCurrentInstance, onBeforeMount } from 'vue';
let { proxy } = getCurrentInstance();
const data = reactive({
  search: {},
  tableData: { data: [], columns: [], tableArrts: { haspage: true } },
});
data.tableData.columns = [
  { title: '操作账户', key: 'operateAccount', width: 120, tooltip: true },
  { title: '访问接口', key: 'operateApi', align: 'left', tooltip: true },
  { title: '访问接口类', key: 'className', align: 'left', tooltip: true },
  { title: '访问类型', key: 'operateType', align: 'left', tooltip: true },
  { title: '调用程序', key: 'moduleCode', align: 'left', tooltip: true },
  { title: '访问参数', key: 'operateParam', align: 'left', tooltip: true },
  { title: '操作时间', key: 'operateTime', align: 'left', tooltip: true },
  { title: '访问开始时间', key: 'beginTime', align: 'left', tooltip: true },
  { title: '访问结束时间', key: 'endTime', align: 'left', tooltip: true },
  { title: '登录IP', key: 'operateIp', align: 'left', tooltip: true },
  { title: '登录位置', key: 'ipAddress', align: 'left', tooltip: true },
];
const queryData = async () => {
  debugger;
  let param = {
    beginDate: data.search.searchDate[0],
    endDate: data.search.searchDate[1],
  };
  data.tableData.data = await proxy.$api.system.queryApiLog(param);
};
</script>

<style lang="scss" scoped></style>
